Export Static Tiddlywiki Single File Tiddlers in HTML

^z 25th January 2024 at 2:32pm

THINK ABOUT:


NOTES TO SELF on how to do a Tiddlywiki-in-node.js image of the ZhurnalyWiki:

  • if not already installed, on the local machine (Mac Airbook in UNIX or whatever), install node.js and install TiddlyWiki as per Installing TiddlyWiki on Node.js
  • in the browser within ZhurnalyWiki, export all the tiddlers using the "Tools" command "export all" – to create a "JSON" set of all the tiddlers as a single-file tiddlers.json
  • load the tiddlers in that resulting single-file tiddlers.json, and save them into selected folder_name, via the Terminal (cd into the directory with "tiddlers.json" and create a folder "folder_name") UNIX command:
    • tiddlywiki --verbose --load ./tiddlers.json --savewikifolder ./folder_name
  • cd into folder_name, and then execute the following commands, following the method for doing a static export of all files as per Generating Static Sites with TiddlyWiki:
    • tiddlywiki --rendertiddlers '[!is[system]]' $:/core/templates/static.tiddler.html static text/plain (may take a while!)
    • tiddlywiki --rendertiddler $:/core/templates/static.template.html static.html text/plain
    • tiddlywiki --rendertiddler $:/core/templates/static.template.css static/static.css text/plain

(explanation: "The first RenderTiddlersCommand generates the HTML representations of individual tiddlers, the second RenderTiddlerCommand saves the static version of the DefaultTiddlers, and the final RenderTiddlerCommand saves the stylesheet. (All the files are placed in the output folder of the wiki folder).")

The result should be a directory with 9,000+ files, one for each tiddler, that works on the local machine. Test it! You may wish to check the largest tiddlers to see if they make sense, or if they are the result of auto-generated random links and should be deleted.

Then, take the 9,000+ file single-file-per-tiddler export on the local host and fix the %-sign URL-encoded filenames and internal links so they work on the http://zhurnaly.com web site. Below is a Perl program "fix_file_names.perl" that attempts to do that, via:

  • replacing the half-dozen commonest characters in file names that need URL-encoding with % signs:
    • space
    • # hashtag
    • , comma
    • ' apostrophe aka single-quote
    • ( open-parenthesis
    • ) close-parenthesis
  • fixing those characters when they appear URL-encoded within links in each of the 8000+ single-files, where they have an encoded % sign (written %25 = "percent-two-five") in front of their ASCII hex values)
  • additionally, cleaning up the page titles by deleting ": My TiddlyWiki — a non-linear personal web notebook" from within each of the files

(note that the Perl code below may be itself messed up if this tiddler is exported and processed!)

Do the URL %-fixing from a Terminal (UNIX shell) window:
  • cd to a directory above where the files-to-be-fixed are located
  • put a copy of fix_file_names.perl in that directory, and create a directory to hold the results
  • execute the command "perl fix_file_names.perl INDIR OUTDIR" with INDIR the name of the directory where the files-to-be-fixed are and OUTDIR the directory where the results are to go

Then:

  • rename "All Tiddlers.html" to "index.html" so there's a handy list of all the files in the snapshot
  • delete "Random Thoughts" and any other crazy-huge generated files
  • replace the contents of the CSS stylesheet "static.css" with the below "static.css" adaptation of zhurnaly.css to hide the TiddlyWiki unæsthetic divisions "tc-subtitle" & "tc-tags-wrapper" & "& tc-tiddler-controls"
  • upload the (9,000+ !) files to zhurnaly.com in the appropriate directory (e.g, "http://zhurnaly.com/z/") – if using PLESK, do them 500-1,000 or so at a time to avoid problems.
  • test on the server to see if it works

And you're done!


fix_file_names.perl:

#! /usr/bin/perl

# fix_file_names.perl version 0.1 --- ^z = 2023-05-20
# (evolved from SnipPattern.perl = 3 Sep 2001)

# function: rename the files in directory INDIR to map "%20" to " "
# and internally change " " to " ", "," to "," etc

# To invoke:
#    perl fix_file_names.perl INDIR OUTDIR
 
print "fix_file_names.perl v.0.1 - BEWARE!\n";

$indir = @ARGV[0];
$outdir = @ARGV[1];
opendir(INDIR, "$indir") or die "couldn't open $indir";
@filenames = grep !/^\./, readdir INDIR;

foreach $page (@filenames) {
# for debugging & progress display:  print "  $page ...\n";

#fix these chars: (space) # , ' ( )
  $pagenew = $page;
  $pagenew =~ s/%20/ /g;
  $pagenew =~ s/%23/#/g;
  $pagenew =~ s/%2C/,/g;
  $pagenew =~ s/%27/\'/g;
  $pagenew =~ s/%28/\(/g;
  $pagenew =~ s/%29/\)/g;

  open my $fh, '<', "$indir/$page" or die "Can't open file $!";
  my $body = do { local $/; <$fh> };  # grab file as one string
  close($fh);

#fix %-encoded strings in the body of each file so URLs work
  $body =~ s/ / /g;
  $body =~ s/#/#/g;
  $body =~ s/,/,/g;
  $body =~ s/'/\'/g;
  $body =~ s/(/\(/g;
  $body =~ s/)/\)/g;

#delete the string "" wherever it appears to make exported tidder titles better
  $body =~ s///g;

  open my $fh, '>', "$outdir/$pagenew" or die "Can't open file $!";
  print $fh $body;
  close($fh);
}

static.css

/* zhurnaly.css - matching http://zhurnaly.com/Zhurnal_Style_Sheet - ^z - 2018-04-20 */
/* mod to hide TiddlyWiki tc-subtitle & tc-tags-wrapper & & tc-tiddler-controls - ^z - 2023-10-06 */

.tc-subtitle {visibility: hidden;}
.tc-tags-wrapper {visibility: hidden;}
.tc-tiddler-controls {visibility: hidden;}

/* preferred font for body text */
body { 
 font-family: Palatino, serif;
 font-size: large;
 }

/* preferred header style */
/* center H1 */
h1 {
 text-align: center;
 background-color: #ccccff;
 color: #000066;
 }
/* left-justify other headers */
h2, h3, h4, h5, h6 {
 background-color: #ccccff;
 color: #000066;
 }

/* preferred link coloring schema */
a:link { color: #000099; }
a:visited { color: #330066; }
a:hover { text-decoration: none ;
  color: #660000; background-color: #ddddff; }

/* preferred tables -- remove ".user" after "table" 2023-03-13 */
table { border-style:outset; border-width:thick; }
table tr td { border-style:inset; border-width:thin; padding:5px; text-align: left; }

img {
    border: #777777 1px solid;
    padding: 10px;
    color: black;
}

div.header img, div.footer img { border: 0; padding: 0; margin: 0; float: left;}

div.footer hr { height: 4px; }

pre {
    background-color: #e6e6e6;
    color: black;
    font-size: small;
}

/* "small" block quotes & "x-small' gotobar/edit-bar & footer-time */
blockquote { font-size: small; }
span.bar { font-size: x-small; font-weight: bold;  background-color: #ddddff; }
div.bar { font-size: x-small; font-weight: bold;  background-color: #ddddff; }
div.time { font-size: x-small; }

/* play with imagecomment styling of text */
div.imageholder { color: white; }

/* define style for "poemMantra" cards - images with text overlays */
#poemMantra {
    position: relative; 
    width:640px;
    color: #ffffff;
    text-shadow: 0 0 16px black;
}
#poemMantra img {
    width:640px;
}
#poemMantra div {
    position: absolute; 
    width: 640px; 
}
.title {
    top:20px;
    width:100%;
    text-align:center;
    font-size:xx-large;
    font-weight:bold;
}
.poem {
    bottom:30px;
    left:20px;
    text-align:left;
    font-size:medium;
}
.mantra {
    bottom:30px;
    text-align:right;
    font-style:italic;
    font-size:large;
}

^z - 2023-05-21 — updated ^z - 2023-06-24 — updated ^z - 2023-10-06